import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import "game.js" as Game

/*
  示例如何使用Canvas绘制动画
  新建工程->创建games.js,编写游戏动画
          Note.qml设计音符
          main.qml添加Canvas，填充顶级窗口
  在Canvas上绘制图形，通常发生在OnPaint信号处理函数中，在这个函数中可以通过获取上下文getContext("2d")
  并使用它来绘制图形。

*/


Window {
    width: 480
    height: 640
    minimumWidth: 480
    maximumWidth: 480
    minimumHeight: 640
    maximumHeight: 640
    visible: true
    title: qsTr("Canvas Game")

    Canvas {
        id:canvas
        anchors.fill: parent
        //得分
        property int score: 0
        //准度宽松系数
        property int loose: 200

        onPaint: {
            var ctx = getContext("2d")
            //绘制背景
            drawBackground(ctx)
            //添加界面刷新函数
            draw(ctx)

        }

        function drawBackground(ctx){
            ctx.setLineDash([1,5,1,1,5])
            ctx.lineWidth = 2
            ctx.strokeStyle = "#e1ad0f"
            ctx.lineCap = "round"

            //绘制游戏谱面边框
            ctx.beginPath()
            ctx.moveTo(180, 0)
            ctx.lineTo(0, 640)
            ctx.stroke()

            //绘制音符线
            ctx.setLineDash([3])
            ctx.beginPath()
            ctx.moveTo(18, 576)
            ctx.lineTo(462, 576)
            ctx.stroke()

            //绘制音符轨道
            ctx.setLineDash([1, 4, 5])
            ctx.beginPath()
            ctx.moveTo(200, 0)
            ctx.lineTo(80, 640)
            ctx.stroke()
            ctx.beginPath()
            ctx.moveTo(220, 0)
            ctx.lineTo(160, 640)
            ctx.stroke()
            ctx.beginPath()
            ctx.moveTo(240, 0)
            ctx.lineTo(240, 640)
            ctx.stroke()
            ctx.beginPath()
            ctx.moveTo(260, 0)
            ctx.lineTo(320, 640)
            ctx.stroke()
            ctx.beginPath()
            ctx.moveTo(280, 0)
            ctx.lineTo(400, 640)
            ctx.stroke()

        }



        //分数显示
        Text{
            anchors.centerIn: parent
            font{
                pointSize: 40
                bold:true
            }
            text: canvas.score
        }

        //界面刷新
        function draw(ctx){
            Game.process(ctx)
            //平滑动画效果
            cancelRequestAnimationFrame(draw) //对每一帧自动更新Canvas的内容，平滑动画效果

        }
        //每隔200ms在随机轨道上自动生成音符
        Timer {
            interval: 200
            repeat: true
            running: true
            onTriggered: {
                //计算在第几条轨道上生成
                var randomNumber = Math.floor(Math.random()*6.99)
                Game.generatedNote(canvas, randomNumber)
            }
        }

        //每隔20毫秒检测音符越界状态
        Timer {
            interval: 20
            repeat: true
            running: true
            onTriggered: {
                Game.noteOver(canvas)
            }
        }

        //获取焦点，按键触发
        focus: true
        Keys.onPressed:{
            Game.pressedKeys(canvas, event.key)
        }
    }

}
